<template>
  <div class="app-container">
    <!-- 头部 -->
    <el-row class="row">
      <el-col :span="14">
        <el-button type="primary" @click="addBtn">新增</el-button>
        <el-button type="warning" @click="scBtn">批量删除</el-button>
      </el-col>
      <el-col :span="10" style="display:flex;">
        <el-input style="flex:1" placeholder="请输入内容" v-model="sechIpt">
        </el-input>
        <el-button
          style="width:80px"
          icon="el-icon-search"
          @click="searchBtn"
        ></el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="data"
      style="width: 100%"
      max-height="500"
      @selection-change="handleSeleveionChange"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @sort-change="sortFun"
    >
      <el-table-column type="selection" width="70"></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="type" label="类别"></el-table-column>
      <el-table-column prop="author" label="发布者"></el-table-column>
      <el-table-column prop="time" label="时间" sortable></el-table-column>
      <el-table-column prop="date" label="日期" sortable></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="check(scope.row)"
            >详情</el-button
          >
          <el-button type="text" size="small" @click="xgTabBtn(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="scTabBtn(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :pageSize="pageSize"
      :total="total"
      @current-change="changFun"
    ></el-pagination>
    <!-- 抽屉 -->
    <el-drawer
      title="详细信息"
      :visible.sync="isZzc"
      :before-close="handleClose"
    >
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input :disabled="qdbtn" v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="type">
            <el-select
              :disabled="qdbtn"
              v-model="form.cid"
              @change="renderType($event)"
              placeholder="请选择类别"
            >
              <el-option
                v-for="(item, index) in classify"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-select
              :disabled="qdbtn"
              v-model="form.time"
              placeholder="请选择用时"
            >
              <el-option label="1分钟" value="1分钟"></el-option>
              <el-option label="3分钟" value="3分钟"></el-option>
              <el-option label="5分钟" value="5分钟"></el-option>
              <el-option label="10分钟" value="10分钟"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容">
            <mavonEditor
              v-model="form.content"
              style="width: 98%; max-height: 200px; overflow-y: auto"
            ></mavonEditor>
          </el-form-item>
          <el-form-item>
            <el-button v-show="!qdbtn" type="primary" @click="onSubmit">{{
              qdButton
            }}</el-button>
            <el-button @click="isZzc = false">取消</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  data() {
    return {
      form: {
        author: "situ"
      },
      sechIpt: "",
      isZzc: false,
      isAdd: [],
      qdButton: "新增",
      qdbtn: false
    };
  },
  computed: {
    ...mapState("msbd", ["data", "classify", "page", "pageSize", "total"])
  },
  methods: {
    handleSeleveionChange(val) {
      this.isAdd = val;
    },
    handleClose(done) {
      this.$confirm("确定要关闭吗？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //新增
    addBtn() {
      this.form = {
        author: "situ"
      };
      this.isZzc = true;
      this.qdbtn = false;
      this.qdButton = "新增";
    },

    // 删除
    scTabBtn(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.removeTableDate(id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量删除
    scBtn() {
      let arr = [];
      this.isAdd.map(item => {
        arr.push(item.id);
      });
      this.scTabBtn(arr.join(","));
    },
    //查看
    check(row) {
      this.isZzc = true;
      this.qdbtn = true;
      this.form = row;
    },
    //选择修改
    xgBtn() {
      if (this.isAdd.length == 1) {
        this.xgTabBtn(this.isAdd[0]);
        this.isAdd = [];
        this.qdbtn = false;
      } else {
        this.$message({
          message: "请选择一项修改",
          type: "success"
        });
        this.isAdd = [];
        this.qdbtn = false;
      }
    },
    //确定
    async onSubmit() {
      if (this.form.id) {
        await this.upTableDate(this.form);
        this.$message({
          message: "恭喜你,修改成功",
          type: "success"
        });
      } else {
        await this.setTableData(this.form);
        this.$message({
          message: "恭喜你,新增成功",
          type: "success"
        });
      }
      this.isZzc = false;
      this.qdbtn = false;
    },
    //修改
    xgTabBtn(row) {
      this.isZzc = true;
      this.qdbtn = false;
      this.qdButton = "修改";
      this.form = JSON.parse(JSON.stringify(row));
    },
    ...mapActions("msbd", [
      "getTableData",
      "setTableData",
      "upTableDate",
      "removeTableDate",
      "sortTableData"
    ]),
    ...mapMutations("msbd", ["SET_PAGE"]),
    //分页
    async changFun(arg) {
      await this.SET_PAGE(arg);
      await this.getTableData();
    },
    //排序
    sortFun(row) {
      // console.log(row);
      this.sortTableData(row);
    },
    //搜索
    searchBtn() {
      this.getTableData(this.sechIpt);
    },
    //类别渲染
    renderType(arg) {
      let obj = {};
      obj = this.classify.find(item => {
        return item.id == arg;
      });
      this.form.type = obj.name;
    }
  },
  async mounted() {
    await this.getTableData();
  },
  components: {
    mavonEditor
  }
};
</script>

<style scoped></style>
